﻿
@{
    ViewBag.Title = "试剂管理";
}

<div class="row ml-0 col-md-12" style=" min-height:5vh;">
    <strong class="font-rfs" style="margin-right: 2rem;padding-top: 0.4rem;">试剂管理</strong>
</div>
<div class="row col-md-12 ml-0 pre-scrollable" style="min-height:90vh;">
    <div class="table-responsive-sm shadow p-0 bg-white rounded col-md-3" style="min-height:90vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li id="li-tabReagents" class="tabButton col-md-3 tab-first-active font-rfs" style="text-align:center;padding-left: 1px;padding-right: 1px;" data-active="true">
                    <a id="a-tabReagents" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">试剂列表</a>
                </li>
                <li class="col-md-9 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="row col-md-12 tab-content tab-body" style="padding-right: 0px;right: -15px;padding-left: 0px;top: -2px;min-height: 87vh;">
            <div class="col-md-12 ml-0 mr-0 tab-pane active" style="padding-left: 0px;padding-right: 0px;">
                <div class="row col-md-12" style="margin-left: 0px;padding-left: 1px; min-height:5vh; padding-top: 3px;">
                    <select id="Reagent-Select-Type" class="form-control font-rfs" style="width:55%; margin-top:0.2rem; margin-bottom:0.1rem; height: calc(1.3em + .75rem + 2px);"></select>
                    <button id="addReagent" class="btn btn-rfs"><i class="bi-plus-square"></i> 添加</button>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12">
                    <table id="tabReagents" class="table table-striped table-bordered table-sm table-hover">
                        <thead>
                            <tr>
                                <th>试剂名称</th>
                                <th>物料名称</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="row rounded col-md-9 ml-1" style="min-height:90vh;">
        <div class="row col-md-12 tab-content" style="padding-left: 0;padding-right: 0px;right: -15px;height: 3vh;">
            <ul class="nav col-md-12" style="padding-right: 0;margin-bottom: 1px;">
                <li id="li-ReagentRelation" class="tabButton col-md-1 tab-first-active font-rfs" style="text-align:center;padding-left: 1px;padding-right: 1px;" data-active="true">
                    <a id="a-ReagentRelation" href="#tabReagentRelation" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">关联信息</a>
                </li>
                <li id="li-ReagentsInfo" class="tabButton col-md-1 tab-other-noactive font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;" data-active="false">
                    <a id="a-ReagentsInfo" href="#tabReagentsInfo" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">试剂信息</a>
                </li>
                <li class="col-md-10 tab-Notactive" style="text-align: center;"><a href="" data-toggle="tab"></a></li>
            </ul>
        </div>
        <div class="row col-md-12 tab-content tab-body" style="padding-right: 0px;right: -15px;padding-left: 0px;top: -2px;min-height: 87vh;">
            <div class="col-md-12 ml-0 mr-0 tab-pane active" id="tabReagentRelation" style="padding-left: 0px;padding-right: 0px;">
                <div class="row col-md-12" style="height:1vh"></div>
                <ul class="nav col-md-12" style="margin-bottom: 1px;padding-right: 0px;">
                    <li class="tabButton col-md-1 tab-other-active font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;height:3vh;" data-active="false">
                        <a href="#tabReagentRelation" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">关联组份</a>
                    </li>
                    <li class="col-md-11 tab-Notactive" style="text-align: center;height:3vh;"><a href="" data-toggle="tab"></a></li>
                </ul>
                <div class="row col-md-12" style="min-height:5vh;">
                    <button id="AddComponent" class="btn btn-rfs"><i class="bi-node-plus" style="color:#007bff"></i> 添加</button>
                    <button id="EditComponent" class="btn btn-rfs"><i class="bi-node-plus-fill" style="color:forestgreen"></i> 编辑</button>
                    <button id="RemoveComponent" class="btn btn-rfs"><i class="bi-node-minus" style="color:red"></i> 删除</button>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12 pre-scrollable" style="min-height:24vh;padding-right: 0px;margin-left: 0px;border-bottom: 1px solid #a8bfde;margin-bottom: 5px;">
                    <table id="tabComponent" class="table table-striped table-bordered table-sm table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>组份名</th>
                                <th>配制浓度</th>
                                <th>物料代码</th>
                                <th>物料名称</th>
                                <th>消耗量</th>
                                <th>单位</th>
                                <th>方法</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
                <ul class="nav col-md-12" style="margin-bottom: 1px;padding-right: 0px;">
                    <li class="tabButton col-md-1 tab-other-active font-rfs" style="text-align: center;padding-left: 1px;padding-right: 1px;height:3vh;" data-active="false">
                        <a href="" data-toggle="tab" class="text-decoration-none" style="display: inline-block;width:100%;">配制记录</a>
                    </li>
                    <li class="col-md-11 tab-Notactive" style="text-align: center;height:3vh;"><a href="" data-toggle="tab"></a></li>
                </ul>
                <div class="row col-md-12" style="min-height:5vh;">
                    <button id="AddRecord" class="btn btn-rfs"><i class="bi-clipboard2-plus" style="color:#007bff"></i> 配制</button>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12 pre-scrollable" style="height:47vh;">
                    <table id="tabRecord" class="table table-striped table-bordered table-sm table-hover">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>状态</th>
                                <th>名称</th>
                                <th>编号</th>
                                <th>物料代码</th>
                                <th>物料名称</th>
                                <th>配制人</th>
                                <th>浓度</th>
                                <th>数量</th>
                                <th>单位</th>
                                <th>配制时间</th>
                                <th>提醒</th>
                                <th>有效期至</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div id="tabReagentsInfo" class="col-md-12 ml-0 mr-0 tab-pane" style="padding-left: 0px;padding-right: 0px;">
                <div class="row col-md-12" style="min-height:5vh;">
                    <button id="Reagent-SaveInfo" class="btn btn-rfs"><i class="bi-database-fill-up" style="color:#007bff"></i> 保存</button>
                </div>
                <div class="table-responsive-sm p-0 bg-white rounded col-md-12" style="height:80vh;overflow-x:auto">
                    <table class="table table-sm">
                        <tbody>
                            <tr style="height:1vh;">
                                <td style="width:1%;border-top:0;"></td>
                                <td style="width:2%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:9%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:2%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:14%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:7%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:1%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:6%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:9%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:10%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:1%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:7%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:13%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:13%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:3%;background-color:#5d6b98;border-top:0"></td>
                                <td style="width:1%;border-top:0"></td>
                            </tr>
                            <tr style="height:1vh;">
                                <td style="border-top:0" colspan=6></td>
                                <td style="background:url(/StaticFile/head_left.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="background-color:#5d6b98;border-top:0" colspan=3></td>
                                <td style="background:url(/StaticFile/head_right.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="border-top:0" colspan=5></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0" colspan=2></td>
                                <td style="border-top:0;padding-bottom:0;" colspan=4>
                                    <input id="Reagent-Name" class="font-rfs" readonly="readonly" style="color:#5d6b98;font-size:calc(0.7em + 0.6vw);font-weight: bold;border:none; margin-bottom: 2px;" placeholder="试剂名称" />
                                </td>
                                <td style="border-top:0" colspan=10></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0" colspan=2></td>
                                <td style="border-top:0;padding-top:0;" colspan=4>
                                    <input id="Reagent-Number" class="font-rfs" style="color:#5d6b98;font-size:calc(0.4em + 0.6vw);font-weight: bold;border:none" placeholder="试剂编号" />
                                </td>
                                <td style="border-top:0" colspan=10></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 试剂类型：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <select id="Reagent-Type" class="form-control font-rfs border-radius-noradius custom-td-select" ></select>
                                </td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 依据标准：</td>
                                <td style="padding-top:0.3vh;" colspan=5><input id="Reagent-AdoptionStandard" class="font-rfs custom-td-input" /></td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 配制浓度：</td>
                                <td style="padding-top:0.3vh;" colspan=5><input id="Reagent-Concentration" class="font-rfs custom-td-input" /></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 配制数量：</td>
                                <td style="padding-top:0.3vh;" colspan=5><input id="Reagent-PreparationQuantity" class="font-rfs custom-td-input" /></td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 配制单位：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <div class="input-group">
                                        <select id="Reagent-UnitsType" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:45% !important;"></select>
                                        <select id="Reagent-QuantityUnit" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:50% !important;"></select>
                                    </div>
                                </td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 有效期：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <div class="input-group">
                                        <input id="Reagent-Validity" class="font-rfs custom-td-input" style="width:50% !important;" placeholder="整数" onkeyup="value=value.replace(/[^\d]/g,'')" />
                                        <select id="Reagent-ValidityUnit" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:45% !important;">
                                            <option>天</option>
                                            <option>月</option>
                                            <option>年</option>
                                        </select>
                                    </div>
                                </td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 入库物料：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <div class="input-group">
                                        <select id="Reagent-MaterialType1" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:32% !important;"></select>
                                        <select id="Reagent-MaterialType2" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:32% !important;"></select>
                                        <select id="Reagent-Material" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:32% !important;"></select>
                                    </div>
                                </td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 到期提醒：</td>
                                <td style="padding-top:0.3vh;" colspan=5><input id="Reagent-Remind" class="font-rfs custom-td-input" placeholder="到期提醒天数" /></td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 提醒人：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <select id="Reagent-RemindUser" class="form-control font-rfs border-radius-noradius custom-td-select"></select>
                                </td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 提醒组：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <div class="input-group">
                                        <select id="Reagent-Site" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:45% !important;"></select>
                                        <select id="Reagent-RemindGroup" class="form-control font-rfs border-radius-noradius custom-td-select" style="width:50% !important;"></select>
                                    </div>
                                </td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 是否启用：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    <select id="Reagent-IsEnable" class="form-control font-rfs border-radius-noradius custom-td-select">
                                        <option>是</option>
                                        <option>否</option>
                                    </select>
                                </td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"></td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                    @* <select id="Reagent-IsReview" class="form-control font-rfs border-radius-noradius custom-td-select">
                                        <option>否</option>
                                        <option>是</option>
                                    </select> *@
                                </td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr style="height:2vh;">
                                <td style="border-top:0;" colspan=2></td>
                                <td class="font-rfs" style="color:gray;display:table-cell; vertical-align:middle;"> 配制方法：</td>
                                <td style="padding-top:0.3vh;" colspan=5>
                                </td>
                                <td class="font-rfs" style ="color:gray;display:table-cell; vertical-align:middle;"></td>
                                <td style="padding-top:0.3vh;" colspan=5><input id="Manufacturer" class="font-rfs" style="margin-top: 0.4rem;width:100%;color:#5d6b98;border:none" /></td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            <tr>
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=12>
                                    <textarea id="Reagent-PreparationMethod" class="font-rfs" rows=10 style="color:gray;border:none;width:100%;"></textarea>
                                </td>
                                <td style="border-top:0"></td>
                            </tr>

                            @*空行*@
                            <tr style="height:5vh">
                                <td style="border-top:0;" colspan=2></td>
                                <td colspan=12></td>
                                <td style="border-top:0;" colspan=2></td>
                            </tr>
                            @*foot*@
                            <tr style="height:1vh;">
                                <td style="border-top:0" colspan=6></td>
                                <td style="background:url(/StaticFile/foot_left.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="background-color:#5d6b98;border-top:0" colspan=3></td>
                                <td style="background:url(/StaticFile/foot_right.png) no-repeat;background-size:cover;border-top:1px"></td>
                                <td style="border-top:0" colspan=5></td>
                            </tr>
                            <tr style="height:1vh;">
                                <td style="border-top:0;"></td>
                                <td style="background-color:#5d6b98;border-top:0" colspan=14></td>
                                <td style="border-top:0"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="Reagent-Add-Modal" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="Reagent-Add-Modal-Title" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <div id="Reagent-Add-Modal-Embed"></div>
            </div>
        </div>
    </div>
</div>
<div class="modal" id="Reagent-Remove-Modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class='modal-header'>
                <p id="Reagent-Remove-Modal-Title" class="pt-3 pl-3 font-rfs"></p>
                <a data-dismiss="modal" class="modal-close">&times;</a>
            </div>
            <div class="modal-body">
                <p id="Reagent-Remove-Modal-body" class="font-rfs"></p>
            </div>
            <div class="modal-Delete-footer">
                <button id="Reagent-Remove-Modal-confirm" class="btn btn-outline-primary border-radius-noradius noLeftBorder noRightBorder font-rfs" style="width:50%; height:fit-content">确定</button>
                <button id="Reagent-Remove-Modal-cancel" data-dismiss="modal" class="btn btn-outline-primary border-radius-noradius noRightBorder font-rfs" style="width:50%; height:fit-content">取消</button>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <script>
        var ReagentsId = '';
        var ComponentId = '';
        $(document).ready(function () {
            LoadType();
            LoadUnitType('Reagent-UnitsType');
            LoadUsers('Reagent-RemindUser');
            LoadSiteList('Reagent-Site');
            LoadMaterialType1('Reagent-MaterialType1');
        });

        function LoadType() {
            $.post("GetReagentType", {
            }, function (data) {
                for (var i = 0; i < data.length; i++) {
                    $("#Reagent-Select-Type").append(new Option(data[i].type));
                    $("#Reagent-Type").append(new Option(data[i].type));
                }
                $("#Reagent-Select-Type").prepend(new Option("", ""));
                $("#Reagent-Select-Type").val("");
                $("#Reagent-Type").prepend(new Option("", ""));
                $("#Reagent-Type").val("");
            });
        }

        $("#Reagent-Select-Type").change(function () {
            LoadReagent();
        });

        function SetIsEnableCortrol(value, row, index) {
            var strHtml = "";
            if (row.isEnable) {
                strHtml = "<i class='bi bi-check-circle-fill'></i>";
            } else {
                strHtml = "<i class='bi bi-x-circle-fill'></i>";
            }

            return strHtml;
        }

        function LoadReagent() {
            var columns = [{ field: "name" }, { field: "materialName" },{ field: "isEnable", width: "5%", align: "center", formatter: SetIsEnableCortrol }];

            $('#tabReagents').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#tabReagents').bootstrapTable({
                method: 'post',
                url: "GetReagentsByType",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        Type: $("#Reagent-Select-Type").find("option:selected").text(),
                        limit: params.limit, // 每页显示多少条记录
                        offset: params.offset // 偏移量
                    };
                    return data;
                },
                queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
                dataField: "rows",

                uniqueId: "code",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 20,   // 默认页大小
                pageList: [10, 20, 30, 50],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,

                selectItemName: "selectItem", // 指定选择行ID
                clickToSelect: true, // 相应单击，自动选中此行
                checkboxHeader: true, // 标题行显示全选按钮

                onClickRow: function (row, $element, field) {
                    $("#tabReagents").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                    ReagentsId = row.id;

                    if (row.isEnable == false)
                        $('#AddRecord').attr('disabled', 'disabled');
                    else
                        $('#AddRecord').removeAttr('disabled');

                    $('#tabRecord').bootstrapTable('destroy');
                    LoadComponents();
                    LoadReagentInfo();
                    LoadRecord();
                },
                silent: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#tabReagents').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        $("#addReagent").click(function () {
            $("#Reagent-Add-Modal-Title").text("添加试剂");

            $("#Reagent-Add-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddReagents", {
                // 参数
            }, function (datas) {
                $("#Reagent-Add-Modal-Embed").html(datas);
            });
        });

        function LoadComponents() {
            var columns = [{ field: "id", visible: false }, { field: "name" }, { field: "concentration" }, { field: "materialCode" }, { field: "materialName" },
            { field: "dosage" }, { field: "dosageUnit" }, { field: "SetMethodButton", width: "5%", formatter: SetMethodButton }];

            EntryInventoryId = '';
            $('#tabComponent').bootstrapTable('destroy'); // 这行代码必须加，否则数据无法刷新
            $('#tabComponent').bootstrapTable({
                method: 'post',
                url: "GetComponentsByReagentId",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        limit: params.limit, // 每页显示多少条记录
                        offset: params.offset, // 偏移量
                        ReagentsId: ReagentsId
                    };
                    return data;
                },
                queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
                dataField: "rows",

                uniqueId: "id",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 10,   // 默认页大小
                pageList: [10, 20, 30, 50],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,

                selectItemName: "selectItem", // 指定选择行ID
                clickToSelect: true, // 相应单击，自动选中此行
                checkboxHeader: true, // 标题行显示全选按钮

                onClickRow: function (row, $element, field) {
                    $("#tabComponent").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                    ComponentId = row.id;
                },
                silent: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {
                    $('.fixed-table-toolbar').css("height", "0px"); /* 隐藏表格上的工具栏 */
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#tabComponent').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        function SetMethodButton(value, row, index) {
            var strHtml = "<button class='table-cell-button btn-rfs' data-Id=" + row.id + "  title='试剂配制方法' onclick='MethodButtenClick(this)'><i class='bi-file-text'></i></button>";
            return strHtml;
        }

        function MethodButtenClick(obj) {
            $("#Reagent-Add-Modal-Title").text("配制方法");

            $("#Reagent-Add-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("ComponentMethod", {
                ComponentId: $(obj.outerHTML).attr("data-Id"),
                ModalID: "Reagent-Add-Modal"
            }, function (data) {
                $("#Reagent-Add-Modal-Embed").html(data);
            });
        }

        $("#AddComponent").click(function () {
            if (ReagentsId.length == 0) {
                alert("请先选择需要添加组份的试剂！");
                return;
            }

            $("#Reagent-Add-Modal-Title").text("添加组份");

            $("#Reagent-Add-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddComponent", {
                ReagentsId: ReagentsId,
                ModalID: "Reagent-Add-Modal"
            }, function (datas) {
                $("#Reagent-Add-Modal-Embed").html(datas);
            });
        });

        $("#EditComponent").click(function () {
            if (ComponentId.length == 0) {
                alert("请先选择需要编辑的组份！");
                return;
            }

            $("#Reagent-Add-Modal-Title").text("添加组份");

            $("#Reagent-Add-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("AddComponent", {
                ComponentId: ComponentId,
                ModalID: "Reagent-Add-Modal"
            }, function (datas) {
                $("#Reagent-Add-Modal-Embed").html(datas);
            });
        });

        $("#RemoveComponent").click(function () {
            if (ComponentId.length == 0) {
                alert("请先选择需要删除的组份！");
                return;
            }

            var row = $("#tabComponent").bootstrapTable('getRowByUniqueId', ComponentId);
            $("#Reagent-Remove-Modal-Title").text("删除组份");
            $("#Reagent-Remove-Modal-body").text("该操作将删除组份：" + row.name + " 是否确定？");

            $("#Reagent-Remove-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });
        });

        $("#Reagent-Remove-Modal-confirm").click(function () {
            $.post("RemoveComponent", {
                ComponentId: ComponentId
            }, function (datas) {
                $('#tabComponent').bootstrapTable('removeByUniqueId', ComponentId);
                alert(datas);
                $("#Reagent-Remove-Modal-cancel").click();
            });
        });

        function LoadReagentInfo() {
            $.post("GetReagentById", {
                Id: ReagentsId
            }, function (data) {
                $("#Reagent-Name").val(data.name);
                $("#Reagent-Number").val(data.number);
                $("#Reagent-Type").val(data.type);
                $("#Reagent-AdoptionStandard").val(data.adoptionStandard);
                $("#Reagent-Concentration").val(data.concentration);
                $("#Reagent-PreparationQuantity").val(data.preparationQuantity);

                $("#Reagent-UnitsType").val("");
                $("#Reagent-QuantityUnit").empty();
                if (data.quantityUnit != null && data.quantityUnit.length > 0) {
                    $("#Reagent-QuantityUnit").append(new Option(data.quantityUnit));
                }

                $("#Reagent-Validity").val(data.validity);
                $("#Reagent-ValidityUnit").val(data.validityUnit);

                $("#Reagent-MaterialType1").val("");
                $("#Reagent-MaterialType2").empty();
                $("#Reagent-Material").empty();
                if (data.materialName != null && data.materialName.length > 0) {
                    $("#Reagent-Material").append(new Option(data.materialName, data.materialCode));
                }

                $("#Reagent-Remind").val(data.remind);
                $("#Reagent-RemindUser").val("");
                if (data.remindUserName != null && data.remindUserName.length > 0) {
                    $("#Reagent-RemindUser").val(data.remindUserId);
                }

                $("#Reagent-Site").val("");
                $("#Reagent-RemindGroup").empty();
                if (data.remindGroupId != null && data.remindGroupId.length > 0) {
                    $("#Reagent-RemindGroup").append(new Option(data.remindGroupName, data.remindGroupId));
                }

                // $("#Reagent-IsReview").val(data.isReview == true ? "是" : "否");
                $("#Reagent-IsEnable").val(data.isEnable == true ? "是" : "否");
                $("#Reagent-PreparationMethod").val(data.preparationMethod);
            });
        }

        $("#Reagent-UnitsType").change(function () {
            LoadUnitByType('Reagent-QuantityUnit', $("#Reagent-UnitsType").find("option:selected").text());
        });

        $("#Reagent-Site").change(function () {
            LoadGroupList($("#Reagent-Site").find("option:selected").text(), 'Reagent-RemindGroup','');
        });

        $("#Reagent-MaterialType1").change(function () {
            LoadMaterialType2('Reagent-MaterialType2', $("#Reagent-MaterialType1").find("option:selected").text(),);
        });

        $("#Reagent-MaterialType2").change(function () {
            LoadMaterialCodeAndName('Reagent-Material', $("#Reagent-MaterialType1").find("option:selected").text(), $("#Reagent-MaterialType2").find("option:selected").text());
        });

        $("#Reagent-SaveInfo").click(function () {
            var jsonStr = {};
            jsonStr["Id"] = ReagentsId;
            jsonStr["Name"] = $.trim($("#Reagent-Name").val());
            jsonStr["Number"] = $.trim($("#Reagent-Number").val());
            jsonStr["Type"] = $("#Reagent-Type").find("option:selected").text();
            jsonStr["AdoptionStandard"] = $.trim($("#Reagent-AdoptionStandard").val());
            jsonStr["Concentration"] = $.trim($("#Reagent-Concentration").val());
            jsonStr["PreparationQuantity"] = $.trim($("#Reagent-PreparationQuantity").val());
            jsonStr["QuantityUnit"] = $("#Reagent-QuantityUnit").find("option:selected").text();
            jsonStr["Validity"] = $.trim($("#Reagent-Validity").val());
            jsonStr["ValidityUnit"] = $("#Reagent-ValidityUnit").find("option:selected").text();
            jsonStr["MaterialCode"] = $("#Reagent-Material").find("option:selected").val();
            jsonStr["MaterialName"] = $("#Reagent-Material").find("option:selected").text();
            jsonStr["Remind"] = $.trim($("#Reagent-Remind").val());
            jsonStr["RemindUserId"] = $("#Reagent-RemindUser").find("option:selected").val();
            jsonStr["RemindUserName"] = $("#Reagent-RemindUser").find("option:selected").text();
            jsonStr["RemindGroupId"] = $("#Reagent-RemindGroup").find("option:selected").val();
            jsonStr["RemindGroupName"] = $("#Reagent-RemindGroup").find("option:selected").text();
            // jsonStr["IsReview"] = $("#Reagent-IsReview").find("option:selected").text() == "是" ? true : false;
            jsonStr["IsEnable"] = $("#Reagent-IsEnable").find("option:selected").text() == "是" ? true : false;
            jsonStr["PreparationMethod"] = $.trim($("#Reagent-PreparationMethod").val());

            $.post("UpdateReagent", {
                jsonStr: JSON.stringify(jsonStr)
            }, function (data) {
                alert(data);
            });
        });

        function SetStatus(value, row, index) {
            var strHtml = "-";
            if (value == "正常") {
                strHtml = "<i class='bi-unlock-fill' style='color:forestgreen'></i>";
            }
            if (value == "锁定") {
                strHtml = "<i class='bi-lock-fill' style='color:red'></i>";
            }
            return strHtml;
        }

        function setDate(value, row, index) {
            if (value != null)
                return value.split('T')[0];
        }

        function LoadRecord() {
            var columns = [{ field: "id", visible: false }, { field: "status", width: "5%", align: "center", formatter: SetStatus },
            { field: "name" }, { field: "number" }, { field: "materialCode" }, { field: "materialName" }, { field: "preparationByName" },
            { field: "concentration" }, { field: "preparationQuantity" }, { field: "quantityUnit" }, { field: "preparationTime", formatter: setDate },
            { field: "validityRemind" }, { field: "validityTo", formatter: setDate }];

            $('#tabRecord').bootstrapTable('destroy');
            $('#tabRecord').bootstrapTable({
                method: 'post',
                url: "GetRecords",
                dataType: "json",  // 服务器端返回值类型
                contentType: "application/x-www-form-urlencoded; charset=UTF-8", // 如果是 POST 请求，这个属性必须加
                queryParams: function (params) {
                    var data = {
                        limit: params.limit, // 每页显示多少条记录
                        offset: params.offset, // 偏移量
                        ReagentId: ReagentsId
                    };
                    return data;
                },
                queryParamsType: "limit", // 服务器端分页，这个参数必需是“limit”
                dataField: "rows",

                uniqueId: "id",          // 设置主键
                sidePagination: "server", // 服务器端分页，这个参数必需设置
                pagination: true,  // 显示分页条,设为true，启用了分页功能
                pageNumber: 1,
                pageSize: 10,   // 默认页大小
                pageList: [10, 20, 30, 50],  // 控制每页数目
                locale: "zh-CN",
                columns: columns,

                onClickRow: function (row, $element, field) {
                    $("#tabRecord").find("tbody").find("tr").each(function () {
                        $(this).removeClass('changeblueColor');
                    });
                    $element.addClass("changeblueColor");
                },
                silent: true,
                formatLoadingMessage: function () {
                    return "请稍等，正在加载中...";
                },
                formatNoMatches: function () {
                    return '无符合条件的记录';
                },
                onLoadError: function (data) {
                    $('#tabRecord').bootstrapTable('removeAll');
                },
                onLoadSuccess: function (data) {
                    SetBootstrapStyle();
                },
                formatShowingRows: function (pageFrom, pageTo, totalRows) {
                    return "正在显示第" + pageFrom + "到第" + pageTo + "条记录，总共" + totalRows + "条记录 ";
                },
                formatRecordsPerPage: function (pageNumber) {
                    return " 每页显示" + pageNumber + '条记录';
                }
            });
        }

        $("#AddRecord").click(function () {
            if (ReagentsId.length == 0) {
                alert("请先选择需要配制的试剂！");
                return;
            }

            $("#Reagent-Add-Modal-Title").text("配制试剂");
            $("#Reagent-Add-Modal").modal({
                backdrop: 'static',
                keyboard: false
            });

            $.post("PreparationOfReagents", {
                ReagentsId: ReagentsId
            }, function (datas) {
                $("#Reagent-Add-Modal-Embed").html(datas);
            });
        });

//********************************************************************************

        $("#li-ReagentRelation").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-first-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-first-noactive') > 0) {
                    $(this).removeClass('tab-first-noactive');
                    $(this).addClass('tab-first-noactive-mouse');
                    LoadComponents();
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-first-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-first-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-first-noactive');
                }
            });

        $("#li-tabReagents").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-other-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-other-noactive') > 0) {
                    $(this).removeClass('tab-other-noactive');
                    $(this).addClass('tab-other-noactive-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-other-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-other-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-other-noactive');
                }
            });

        $("#li-ReagentsInfo").hover(
            function () {
                if ($(this).attr("class").indexOf('tab-other-active') > 0) {
                    $(this).addClass('tab-enter-mouse');
                }
                if ($(this).attr("class").indexOf('tab-other-noactive') > 0) {
                    $(this).removeClass('tab-other-noactive');
                    $(this).addClass('tab-other-noactive-mouse');
                }
            },
            function () {
                $(this).removeClass('tab-enter-mouse');
                $(this).removeClass('tab-other-noactive-mouse');

                if ($(this).attr("data-active") == 'true') {
                    $(this).addClass('tab-other-active');
                }
                if ($(this).attr("data-active") == 'false') {
                    $(this).addClass('tab-other-noactive');
                }
            });

        $("#a-ReagentRelation").click(function () {
            if ($("#li-ReagentsInfo").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-ReagentsInfo").removeClass('tab-other-active');
                $("#li-ReagentsInfo").addClass('tab-other-noactive');
            }

            if ($("#li-ReagentsInfo").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-ReagentsInfo").removeClass('tab-other-active');
            }

            $("#li-ReagentRelation").attr("data-active", true);
            $("#li-ReagentsInfo").attr("data-active", false);
        });

        $("#a-ReagentsInfo").click(function () {
            if ($("#li-ReagentRelation").attr("class").indexOf('tab-first-active') > 0) {
                $("#li-ReagentRelation").removeClass('tab-first-active');
                $("#li-ReagentRelation").addClass('tab-first-noactive');
            }

            if ($("#li-ReagentsInfo").attr("class").indexOf('tab-other-active') > 0) {
                $("#li-ReagentsInfo").removeClass('tab-other-active');
                $("#li-ReagentsInfo").addClass('tab-other-noactive');
            }

            $("#li-ReagentsInfo").attr("data-active", true);
            $("#li-ReagentRelation").attr("data-active", false);
        });

    </script>
}
